<template>
    <el-card>
        <div>
            单词列表
        </div>
        <template>
            <el-table :data="wordList" stripe style="width: 100%">
                <el-table-column prop="word" label="单词" width="180">
                </el-table-column>
                <el-table-column prop="kana" label="假名" width="180">
                </el-table-column>
                <el-table-column prop="chinese" label="中文" width="180">
                </el-table-column>
                <el-table-column prop="chinese" label="操作">
                    <template slot-scope="scope">
                        <el-button size='mini' @click="handleView(scope)">查看</el-button>
                        <el-button size='mini' @click="handleCheck(scope)">检查</el-button>
                        <el-button size='mini' @click="handleUpdate(scope)">修改</el-button>
                        <el-button size='mini' @click="handleDelete(scope)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <div class="block">
                <el-pagination layout="prev, pager, next" :total="50">
                </el-pagination>
            </div> -->

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="pageSizes" :page-size="PageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
            </el-pagination>

        </template>

        <!-- 查看单词 -->
        <el-dialog title="查看单词" :visible.sync="dialogCheckView">
            <el-carousel :autoplay="false">
                <el-carousel-item>
                    <div>
                        <h3 class="big">
                            {{ selectedWord.word }}
                        </h3>
                    </div>
                </el-carousel-item>
                <el-carousel-item>
                    <div>
                        <h3 class="big">
                            {{ selectedWord.kana }}
                        </h3>
                    </div>
                </el-carousel-item>
                <el-carousel-item>
                    <div>
                        <h3 class="big">
                            {{ selectedWord.chinese }}
                        </h3>
                    </div>
                </el-carousel-item>
            </el-carousel>

            <el-card>
                <div style="padding:20xp">
                    <el-button size='mini' @click="viewPrevious()">上一个单词</el-button>
                    <el-button size='mini' @click="viewNext()">下一个单词</el-button>
                </div>
            </el-card>
        </el-dialog>

        <!-- 检查单词的询问 -->
        <el-dialog title="检查单词" :visible.sync="dialogCheckCheck">
            <div>
                <el-button type="small" @click="toKanji()">
                    根据单词检查假名
                </el-button>
                <el-button type="small" @click="toKana()">
                    根据假名检查单词
                </el-button>
            </div>
        </el-dialog>

    </el-card>

</template>

<script>
export default {
    data() {
        return {
            wordList: [{
                word: '遠い',
                kana: 'とおい',
                chinese: '远的'
            }, {
                word: '近い',
                kana: 'ちかい',
                chinese: '近的'
            }, {
                word: '高い',
                kana: 'たかい',
                chinese: '高的'
            }],

            selectedWord: {
                checkCount: 0,
                chinese: "远的",
                id: '1',
                kana: "おとい",
                rightCount: 0,
                userId: "0",
                word: "遠い"
            },
            selectIndex: 1,

            dialogCheckView: false,
            dialogCheckCheck: false,

            // 默认显示第几页
            currentPage: 1,
            // 总条数，根据接口获取数据长度(注意：这里不能为空)
            totalCount: 1,
            // 个数选择器（可修改）
            pageSizes: [25, 30, 50, 100],
            // 默认每页显示的条数（可修改）
            PageSize: 25,

        }
    },

    methods: {
        handleCheck(scope) {
            console.log("触发检查");
            this.selectIndex = scope.$index + 1 + (this.PageSize * (this.currentPage - 1));
            this.updateSelectedWord();
            this.dialogCheckCheck = true;
        },
        handleView(scope) {
            console.log("触发查看");
            this.selectIndex = scope.$index + 1 + (this.PageSize * (this.currentPage - 1));
            this.updateSelectedWord();
            this.dialogCheckView = true;
        },
        async handleUpdate(scope) {
            console.log("触发修改");
            this.selectIndex = scope.$index + 1 + (this.PageSize * (this.currentPage - 1));
            await this.updateSelectedWord();
            this.$router.push({
                path: "/update/word",
                query: {
                    selectedWord: this.selectedWord,
                    currentPage:this.currentPage,
                },
            });
        },
        async handleDelete(scope) {
            console.log("触发删除");
            this.selectIndex = scope.$index + 1 + (this.PageSize * (this.currentPage - 1));
            await this.updateSelectedWord();
            let result = await this.$API.word.deleteWord(this.selectedWord);
            if (result.code == 200) {
                this.$message({
                    message: "删除成功！",
                    type: "success",
                });
                await this.updateWordList();
            } else {
                this.$message({
                    message: result.msg,
                    type: "error",
                });
            }

        },
        viewPrevious() {
            let num = this.selectIndex - 1;
            if (num === 0) {
                num = this.totalCount;
            }
            this.selectIndex = num;
            this.updateSelectedWord();
        },
        viewNext() {
            let num = this.selectIndex + 1;
            if (num > this.totalCount) {
                num = 1;
            }
            this.selectIndex = num;
            this.updateSelectedWord();
        },
        toKanji() {
            this.$router.push({
                path: "/check/kanji",
                query: {
                    selectedWord: this.selectedWord,
                    selectIndex: this.selectIndex,
                    totalCount: this.totalCount,
                },
            });
        },
        toKana() {
            this.$router.push({
                path: "/check/kana",
                query: {
                    selectedWord: this.selectedWord,
                    selectIndex: this.selectIndex,
                    totalCount: this.totalCount,
                },
            });
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.updateWordList();

        },
        handleSizeChange(val) {
            this.PageSize = val;
            this.updateWordList();
        },

        async updateWordList() {
            var data = {
                userId: window.localStorage.getItem('userId'),
                currentPage: this.currentPage,
                pageSize: this.PageSize,
            }
            let res = await this.$API.word.getWordList(data);
            if (res.code === 200) {
                this.wordList = res.data.list;
                this.totalCount = res.data.total;
            } else {

            }
        },

        async updateSelectedWord() {
            var data = {
                userId: window.localStorage.getItem('userId'),
                currentPage: this.selectIndex,
                pageSize: 1,
            }
            let res = await this.$API.word.getWordList(data);
            if (res.code === 200) {
                this.selectedWord = res.data.list[0];
            } else {

            }
        },
    },
    async mounted() {
        // window.localStorage.setItem("userId", 0);
        let cp;
        if ((cp = this.$route.query.currentPage) != undefined) {
            this.currentPage = parseInt(cp);
        }
        await this.updateWordList();
    }
}
</script>

<style>
.el-carousel__item h3 {
    color: #475669;
    font-size: 40px;
    opacity: 0.75;
    line-height: 300px;
    margin: auto;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
}
</style>